<template>


    <el-form :model="form" label-width="auto">
        <el-form-item label="用户名">
            <el-input v-model="form.username" />
        </el-form-item>

        <el-form-item label="密码">
            <el-input v-model="form.password" />
        </el-form-item>
        <el-form-item label="昵称">
            <el-input v-model="form.nickname" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button>Cancel</el-button>
        </el-form-item>
    </el-form>

</template>

<script setup lang="ts" name='edit'>
import { ref, reactive } from "vue";
import { ElMessageBox, ElNotification } from 'element-plus'

//用于保存的API
import { saveOrUpdateUser } from '@/api/permission/user/index'


const showEdit = defineModel('showEdit')





const form = reactive({
    username: '',
    password: '',
    nickname: ''
})

const onSubmit = () => {
    saveOrUpdateUser(form).then(success => {
        ElNotification({
            title: '消息',
            type: 'success',
            message: "保存成功",
        })
        //将父组件中的  v-model:showEdit="showEdit"  
        showEdit.value = false


    })
}


</script>

<style scoped></style>